<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenVINO</title>
    <style>
        div {
            border: 0;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #root {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 100px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
        }
        #title {
            flex: 0 0 auto;
            font-size: 32px;
            color: black;
        }
        #table {
            flex: 1 1 0;
            margin-top: 40px;
            width: 1200px;
            overflow-y: scroll;
            padding: 0 20px;
            border: 1px solid gray;
        }
        .row {
            width: 100%;
            height: 54px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
        }
        .time {
            flex: 0 0 auto;
            font-size: 22px;
        }
        .items {
            flex: 0 0 auto;
            font-size: 22px;
        }
    </style>
    <script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<div id="root">
    <span id="title">情绪监控</span>
    <div id="table"></div>
</div>
</body>
<script type="text/javascript">
    function formatTime (time) {
        let date = new Date(time)
        return date.toLocaleTimeString()
    }
    const server = new WebSocket("ws://localhost:8080/ws")
    server.onopen = () => console.log("websocket connected")
    server.onerror = err => console.log("websocket failed: %o", err)
    server.onclose = () => console.log("websocket closed")
    server.onmessage = msg => {
        let data = JSON.parse(msg.data)
        let table = $("#table")
        table.append(`
            <div class="row">
                <span class="time">${formatTime(data.time)}</span>
                <span class="items">${data.items.join(",")}</span>
            </div>
        `)
        table.animate({
            scrollTop: $('#table').get(0).scrollHeight
        }, 100);
    }
</script>
</html>